<html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Quickchoice - a Speed Dial clone for css transform supporting browsers</title>  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-language" content="en">
	<link rel="bookmark" type="text/html" title="Quickchoice" href="quickchoice.html" tppabs="http://www.netzgesta.de/dev/quickchoice.html">
	<meta name="Author" lang="en" content="dev.netzgesta.de - Christian Effenberger">	<meta name="Publisher" lang="en" content="www.netzgesta.de - Christian Effenberger">	<meta name="Copyright" lang="en" content="public domain">	<meta name="Description" lang="en" content=">Quickchoice is a simple and quick implementation of Opera's Speed Dial. Currently useable with Safari 3.2 and probably Firefox 3.1">
	<meta name="Keywords" lang="en" content=">unobtrusive javascript, Mozilla, Safari, Chrome, Gecko, Webkit">
    <meta name="DC.date.created" content="2008-12-22 12:00:00">
	<meta http-equiv="Content-Style-Type" content="text/css">
<style>
body {min-width: 800px; min-height: 600px; margin: 0px; padding: 0px;}
.wrapper { width: 690px; height: 540px; border: 1px solid #999999; margin: 30px auto; margin-bottom: 0px; padding: 8px; border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px; -moz-user-select: none; -khtml-user-select: none;}
.thumbnail div.erase {position: absolute; font-size: 24px; width: 24px; height: 24px; top: -32px; right: -32px; z-index: 100; color: white; cursor: pointer; text-shadow: 0px 0px 4px black;}
.thumbnail div.erase:hover {color: red;}
.thumbnail {position: relative; width: 200px; height: 150px; border: 10px solid #e0e0e0; float: left; margin: 5px; padding: 0px; text-align: center; vertical-align: bottom; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 0px 0px 4px black; -moz-box-shadow: 0px 0px 4px black; -webkit-box-shadow: 0px 0px 4px black;}
.thumbnail:hover {border: 10px solid orange;}
.thumbnail div {color: gray; font-family: arial, helvetica, sans-serif;}
.thumbnail div.number {display: none; position: absolute; font-size: 16px; font-weight: bold; width: 16px; height: 16px; top: -14px; left: -14px; z-index: 100; color: white; cursor: default; text-shadow: 0px 0px 4px black;}
.thumbnail div.trash {display: none; position: absolute; font-size: 16px; font-weight: bold; width: 16px; height: 16px; bottom: -14px; right: -14px; z-index: 100; color: white; cursor: pointer; text-shadow: 0px 0px 4px black;}
.thumbnail div.trash:hover {color: #00e000;}
.thumbnail div big {font-weight: bold; font-size: 100px;}
.thumbnail div small {font-size: 18px;}
.link {left:0px; top:0px; position: absolute; width: 198px; height: 148px;}
a:link {border: 1px solid silver;}
a:visited {border: 1px solid gray;}
a:active {border: 1px solid red;}
.lock {overflow: hidden; outline: none; position: absolute; width: 200px; height: 150px; top: 0px; left: 0px;}
iframe {display: none; border: 0px; padding: 0px; width: 800px; height: 600px; 
transform: scale(.25); transform-origin: top left;
-moz-transform: scale(.25); -moz-transform-origin: top left;
-webkit-transform: scale(.25); -webkit-transform-origin: top left;}
#fake {border: 0px none; margin: 0px; padding: 0px; width: 1px; height: 1px;}
#jguru, #cguru, #sguru { padding: 4px; width: 99%; height: auto; text-align: center; background-color: black; }
#jguru div, #cguru div, #sguru div { border: solid 3px red; padding: 4px; font-family: monospace; font-size: 1.25em; width: auto; height: auto; color: red; text-align: center; text-decoration: blink; }
#cguru, #sguru { display: none;}
p {text-align: center; color: orange;}
.bganim {background: url() 50% 50% no-repeat;}
</style>
	<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
<!--
function $(v) {return(document.getElementById(v));}
function createCookie(name,value,days) {
	if(days) {var date=new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires="; expires="+date.toGMTString();
	}else {var expires = "";}
	document.cookie=name+"="+value+expires+"; path=/";
}
function readCookie(name) {
	var nameEQ=name+"="; var ca=document.cookie.split(';');
	for(var i=0;i<ca.length;i++) {var c=ca[i];
		while(c.charAt(0)==' ') c=c.substring(1,c.length);
		if(c.indexOf(nameEQ)==0) return c.substring(nameEQ.length,c.length);
	}return null;
}
function eraseCookies() {
	if(document.cookie) {var ele,i; 
		for(i=1;i<10;i++) {createCookie('url'+i,"",-1);}
		for(i=1;i<10;i++) {ele=$('t'+i); if(ele.style.display=="block") {clearURL(ele);}}	
	}
}
function setFocus(v) {$('a'+v).focus(); return false;}
function removeBG(ele) {ele.className=""; return false;}
function getURL(ak) {
	var st,ip,no; st=ak.id; no=st.substr(1,1); ip=$('i'+no); ip.value=prompt("Input the #"+no+" webaddress (e.g. http://google.com)", ip.value);
	if(ip.value!="") {if(document.cookie) {createCookie('url'+no,ip.value,365);} setURL(ak,ip,no);}else {return false;}
}
function setURL(ak,ip,no) {
	var obj=$('f'+no); ak.removeAttribute("onclick");
	ak.setAttribute("title",ip.value); ak.setAttribute("href",ip.value);
	$('n'+no).style.display='block'; $('t'+no).style.display='block';
	obj.setAttribute("src",""); obj.className="bganim";
	obj.setAttribute("onload","removeBG(this);"); obj.style.display='block';
	$('p'+no).style.display='none'; obj.setAttribute("src",ip.value);
	return false;
}
function clearURL(ele) {
	var obj,no,st; st=ele.id; no=st.substr(1,1);
	if(document.cookie) {createCookie('url'+no,'',365);}
	ele.style.display='none'; $('n'+no).style.display='none'; $('p'+no).style.display='block';
	obj=$('f'+no); obj.setAttribute("src",""); obj.style.display='none'; obj=$('a'+no);
	obj.setAttribute("onclick","getURL(this);return false;");
	obj.setAttribute("title","Click to add a webpage [ctrl]+["+no+"]");
	obj.setAttribute("href","#");
	return false;
}
function get_cssSupport(v) {
	var t,d=new Object(),s=new Array("O","Ms","Moz","Khtml","Webkit"); 
	d["css"]=false; d["any"]=false; d["moz"]=false; d["khtml"]=false; d["webkit"]=false; d["ms"]=false; d["o"]=false;
	if(v&&(typeof v==='string')) {t=v.substr(0,1).toUpperCase()+v.substring(1);
		try {d["css"]=(document.body.style[v]!==undefined);}catch(e) {} 
		for(var i=0;i<s.length;i++) {try {d[s[i].toLowerCase()]=(document.body.style[s[i]+t]!==undefined);}catch(e) {}}
	} d["any"]=(d["css"]||d["moz"]||d["khtml"]||d["webkit"]||d["ms"]||d["o"]?true:false);
	return d;
}

window.onload=function() {
	var supported=get_cssSupport('transform');
	if(supported["any"]==true&&!document.all) {
		if(navigator.cookieEnabled==true) {
			if(document.cookie) {
				var tx,ak,ip; for(var i=1;i<10;i++) {tx=readCookie('url'+i); if(tx!="") {ak=$('a'+i); ip=$('i'+i); ip.value=tx; setURL(ak,ip,i);}}	
			}else {for(var i=1;i<10;i++) {createCookie('url'+i,'',365);}}
		}else {$("cguru").style.display='block';}
	}else {$("sguru").style.display='block'; $("main").innerHTML="";}
}
-->
</script>
</head>
<body><noscript><div id="jguru" title="By this you can recognize the Amiga fan!"><div><strong>Guru Meditation</strong> - With deactivated JavaScript: nothing will happen!</div></div></noscript>
<div id="cguru" title="By this you can recognize the Amiga fan!"><div><strong>Guru Meditation</strong> - With deactivated Cookies: nothing will be saved!</div></div>
<div id="sguru" title="By this you can recognize the Amiga fan!"><div><strong>Guru Meditation</strong> - Missing style sheet transform support!</div></div>
<div class="wrapper" id="main">
<div class="thumbnail" id="d1"><div class="lock"><iframe id="f1" class="bganim" src="" name="f1" scrolling="no" frameborder="0"></iframe></div><div id="p1" class="lock"><big>1</big><br /><small>Click to add a webpage</small></div><input id="i1" name="i1" type="hidden" value="" /><a tabindex="1" accesskey="1" id="a1" onclick="getURL(this);return false;" href="#" title="Click to add a webpage [ctrl]+[1]" class="link"><div class="link"></div></a><div class="number" id="n1">&#x2776;</div><div class="trash" id="t1" onclick="clearURL(this);return false;" title="Clear url">&#x267c;</div></div>
<div class="thumbnail" id="d2"><div class="lock"><iframe id="f2" class="bganim" src="" name="f2" scrolling="no" frameborder="0"></iframe></div><div id="p2" class="lock"><big>2</big><br /><small>Click to add a webpage</small></div><input id="i2" name="i2" type="hidden" value="" /><a tabindex="2" accesskey="2" id="a2" onclick="getURL(this);return false;" href="#" title="Click to add a webpage [ctrl]+[2]" class="link"><div class="link"></div></a><div class="number" id="n2">&#x2777;</div><div class="trash" id="t2" onclick="clearURL(this);return false;" title="Clear url">&#x267c;</div></div>
<div class="thumbnail" id="d3"><div class="lock"><iframe id="f3" class="bganim" src="" name="f3" scrolling="no" frameborder="0"></iframe></div><div id="p3" class="lock"><big>3</big><br /><small>Click to add a webpage</small></div><input id="i3" name="i3" type="hidden" value="" /><a tabindex="3" accesskey="3" id="a3" onclick="getURL(this);return false;" href="#" title="Click to add a webpage [ctrl]+[3]" class="link"><div class="link"></div></a><div class="number" id="n3">&#x2778;</div><div class="trash" id="t3" onclick="clearURL(this);return false;" title="Clear url">&#x267c;</div><div class="erase" onclick="eraseCookies();return false;" title="Erase cookies">&#x2716;</div></div>
<div class="thumbnail" id="d4"><div class="lock"><iframe id="f4" class="bganim" src="" name="f4" scrolling="no" frameborder="0"></iframe></div><div id="p4" class="lock"><big>4</big><br /><small>Click to add a webpage</small></div><input id="i4" name="i4" type="hidden" value="" /><a tabindex="4" accesskey="4" id="a4" onclick="getURL(this);return false;" href="#" title="Click to add a webpage [ctrl]+[4]" class="link"><div class="link"></div></a><div class="number" id="n4">&#x2779;</div><div class="trash" id="t4" onclick="clearURL(this);return false;" title="Clear url">&#x267c;</div></div>
<div class="thumbnail" id="d5"><div class="lock"><iframe id="f5" class="bganim" src="" name="f5" scrolling="no" frameborder="0"></iframe></div><div id="p5" class="lock"><big>5</big><br /><small>Click to add a webpage</small></div><input id="i5" name="i5" type="hidden" value="" /><a tabindex="5" accesskey="5" id="a5" onclick="getURL(this);return false;" href="#" title="Click to add a webpage [ctrl]+[5]" class="link"><div class="link"></div></a><div class="number" id="n5">&#x277a;</div><div class="trash" id="t5" onclick="clearURL(this);return false;" title="Clear url">&#x267c;</div></div>
<div class="thumbnail" id="d6"><div class="lock"><iframe id="f6" class="bganim" src="" name="f6" scrolling="no" frameborder="0"></iframe></div><div id="p6" class="lock"><big>6</big><br /><small>Click to add a webpage</small></div><input id="i6" name="i6" type="hidden" value="" /><a tabindex="6" accesskey="6" id="a6" onclick="getURL(this);return false;" href="#" title="Click to add a webpage [ctrl]+[6]" class="link"><div class="link"></div></a><div class="number" id="n6">&#x277b;</div><div class="trash" id="t6" onclick="clearURL(this);return false;" title="Clear url">&#x267c;</div></div>
<div class="thumbnail" id="d7"><div class="lock"><iframe id="f7" class="bganim" src="" name="f7" scrolling="no" frameborder="0"></iframe></div><div id="p7" class="lock"><big>7</big><br /><small>Click to add a webpage</small></div><input id="i7" name="i7" type="hidden" value="" /><a tabindex="7" accesskey="7" id="a7" onclick="getURL(this);return false;" href="#" title="Click to add a webpage [ctrl]+[7]" class="link"><div class="link"></div></a><div class="number" id="n7">&#x277c;</div><div class="trash" id="t7" onclick="clearURL(this);return false;" title="Clear url">&#x267c;</div></div>
<div class="thumbnail" id="d8"><div class="lock"><iframe id="f8" class="bganim" src="" name="f8" scrolling="no" frameborder="0"></iframe></div><div id="p8" class="lock"><big>8</big><br /><small>Click to add a webpage</small></div><input id="i8" name="i8" type="hidden" value="" /><a tabindex="8" accesskey="8" id="a8" onclick="getURL(this);return false;" href="#" title="Click to add a webpage [ctrl]+[8]" class="link"><div class="link"></div></a><div class="number" id="n8">&#x277d;</div><div class="trash" id="t8" onclick="clearURL(this);return false;" title="Clear url">&#x267c;</div></div>
<div class="thumbnail" id="d9"><div class="lock"><iframe id="f9" class="bganim" src="" name="f9" scrolling="no" frameborder="0"></iframe></div><div id="p9" class="lock"><big>9</big><br /><small>Click to add a webpage</small></div><input id="i9" name="i9" type="hidden" value="" /><a tabindex="9" accesskey="9" id="a9" onclick="getURL(this);return false;" href="#" title="Click to add a webpage [ctrl]+[9]" class="link"><div class="link"></div></a><div class="number" id="n9">&#x277e;</div><div class="trash" id="t9" onclick="clearURL(this);return false;" title="Clear url">&#x267c;</div></div>
<input onfocus="setFocus(1);" tabindex="10" id="fake" name="fake" value="" /></div>
<p><small><em>Safari 4 iFrame css transform scale support is buggy!</em></small></p>
</body>
</html>
